<template>
  <section class="anime-section">
    <div class="content">
      <h1>动漫胶囊海报</h1>
      <p>bilibili 不再180s</p>
      <button @click="triggerConfetti">Hello</button>
    </div>
    <div class="sliders">
      <div class="slider-container" v-for="(images, index) in sliders" :key="index" :id="`slider${index + 1}`">
        <div class="slider-track" :class="{ 'reverse': index === 1 }">
          <div class="slide" v-for="(img, idx) in images" :key="idx">
             <img :src="img" alt=""/>
          </div>  
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import confetti from 'canvas-confetti'

export default {
  name: 'CapsulePoster',
  data() {
    return {
    sliders: [
      ['/img/1.jpg', '/img/2.jpg', '/img/3.jpg', '/img/4.jpg'],
      ['/img/5.jpg', '/img/6.jpg', '/img/7.jpg', '/img/8.jpg'],
      ['/img/9.jpg', '/img/10.jpg', '/img/11.jpg', '/img/3.jpg']
    ]
    }
  },
  mounted() {
    this.startConfetti();
  },
  methods: {
    randomInRange(min, max) {
      return Math.random() * (max - min) + min;
    },
    startConfetti() {
      const duration = 999 * 100000;
      const animationEnd = Date.now() + duration;
      let skew = 1;

      const frame = () => {
        const timeLeft = animationEnd - Date.now();
        skew = Math.max(0.8, skew - 0.001);

        confetti({
          particleCount: 1,
          startVelocity: 5,
          ticks: 50,
          decay: 0.5,
          origin: {
            x: Math.random(),
            y: Math.random() * skew - 0.2
          },
          colors: ['#ffffff'],
          shapes: ['circle'],
          gravity: 0.5,
          scalar: this.randomInRange(0.4, 1),
          drift: this.randomInRange(-0.4, 0.8)
        });

        if (timeLeft > 0) {
          requestAnimationFrame(frame);
        }
      };

      frame();
    },
    triggerConfetti() {
      // 可用于手动触发一次
      this.startConfetti();
    }
  }
}
</script>

<style scoped>
@import url("https://chinese-fonts-cdn.deno.dev/packages/dymh/dist/DouyinSansBold/result.css");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.anime-section {
  height: calc(100vh - 100px);
  width: 100%;
  font-family: 'Douyin Sans';
  display: grid;
  grid-template-columns: 50% 50%;
  place-items: center;
  background: #6464d4;
  overflow: hidden;
}

.sliders {
  display: flex;
  gap: 35px;
  transform: rotate(8deg);
  --slider-count: 4;
  --slider-width: 150px;
  --slider-height: 300px;
  --gap: 7px;
  --time: 15s;
}

.slider-container {
  width: 200px;
  height: 100vh;
  position: relative;
  background: transparent;
}

.slider-track {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  animation: moveup calc(var(--time) * var(--slider-count)) linear infinite;
}

.slider-track.reverse {
  animation: movedown calc(var(--time) * var(--slider-count)) linear infinite;
}

.slide {
  height: var(--slider-height);
  width: var(--slider-width);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(255, 255, 255, 0.1), transparent, rgba(255, 255, 255, 0.1));
  border-radius: 120px;
  margin: var(--gap) 0;
  padding: 10px;
}

.slide img {
  border-radius: inherit;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes moveup {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-1 * var(--slider-count) * (var(--slider-height) + var(--gap) * 2)));
  }
}

@keyframes movedown {
  0% {
    transform: translateY(calc(-1 * var(--slider-count) * (var(--slider-height) + var(--gap) * 2)));
  }
  100% {
    transform: translateY(0);
  }
}

.content {
  color: rgb(207, 207, 207);
  padding-left: 80px;
}

.content h1 {
  font-size: clamp(2rem, 5vw, 7rem);
  letter-spacing: 2px;
  margin-bottom: 30px;
  background: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.content p {
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 500;
  max-width: 600px;
  line-height: 1.5;
}

button {
  background-color: #21ad67;
  color: #fff;
  box-shadow: #21ad67 0 0 0 0;
  padding: 15px 30px;
  margin-top: 40px;
  border: 0;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.5s ease;
  cursor: pointer;
}

button:hover,
button:active {
  box-shadow: #21ad67 0 4px 20px 0;
  transform: translateY(3px);
  transition: 0.1s;
}

/* Responsive Styles */
@media (max-width: 1500px) {
  :root {
    --slider-width: 180px;
    --slider-height: 350px;
  }

  .anime-section {
    grid-template-columns: 45% 55%;
  }

  .sliders {
    gap: 15px;
  }
}

@media (max-width: 1200px) {
  :root {
    --slider-width: 150px;
    --slider-height: 300px;
  }

  .anime-section {
    grid-template-columns: 40% 60%;
  }

  .content {
    padding-left: 60px;
  }
}

@media (max-width: 850px) {
  :root {
    --slider-width: 180px;
    --slider-height: 350px;
  }

  .anime-section {
    grid-template-columns: 100%;
  }

  .sliders {
    gap: 35px;
  }

  .content {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 40px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    color: #e3e2e5;
  }
}

@media (max-width: 650px) {
  :root {
    --slider-width: 150px;
    --slider-height: 300px;
  }

  .sliders {
    gap: 15px;
  }

  .button {
    margin-top: 25px;
    padding: 10px 20px;
    font-size: 0.8rem;
  }
}

@media (max-width: 350px) {
  .content p {
    line-height: 30px;
  }
}
</style>
